import React from 'react';

export default function Main({ list, handleDelById, handleUpdateById }) {
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((item) => (
          <li key={item.id} className={item.isDone ? 'completed' : ''}>
            <div className="view">
              <input
                onChange={() => handleUpdateById(item.id)}
                className="toggle"
                type="checkbox"
                checked={item.isDone}
              />
              <label>{item.task}</label>
              <button className="destroy" onClick={() => handleDelById(item.id)}></button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}
